<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>缺陷管理系统—用户登录</title>
<meta charset="utf-8">
<meta name="keywords" content="DMS缺陷管理系统" />
<meta name="description" content="DMS缺陷管理系统" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<base href="${pageContext.request.contextPath}/">
<script type="text/javascript" src="js/jquery.1.11.1.js"></script>
<script type="text/javascript" src="js/sure_picture.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/site.css" id="siteStyle">
<link rel="stylesheet" href="css/login.css">

<!-- 移动设备 viewport -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">

<!-- 360浏览器默认使用Webkit内核 -->

<!-- 样式 -->
<link rel="stylesheet" href="admui/bootstrap.css">
<link rel="stylesheet" href="admui/site.css" id="siteStyle">
    <!-- 插件 -->
    <link rel="stylesheet" href="admui/animsition.css">
    <!-- 图标 -->
    <link rel="stylesheet" href="admui/web-icons.css">
    <!-- 插件 -->
    <link rel="stylesheet" href="admui/bootstrap-select.css">
    <link rel="stylesheet" href="admui/formValidation.css">
  <script src="layer/layer.js"></script>
</head>



<style type="text/css">
.code {
	
	font-family: Arial;
	font-style: italic;
	color: blue;
	font-size: 20px;
	border: 0;
}
a:hover {
	text-decoration: underline;
}
</style>
<body class="page-login layout-full page-dark" data-spy="scroll">

	<div class="page height-full">
		<div class="page-content height-full">
			<div
				class="page-brand-info vertical-align animation-slide-left hidden-xs">
				<div class="page-brand vertical-align-middle">

					<h2 class="hidden-sm">DMS缺陷管理系统</h2>
					<ul class="list-icons hidden-sm">
						<li><i class="wb-check" aria-hidden="true"></i> DMS(Defect
							Management System) 是一个基于最新 Web
							技术的企业级通用缺陷管理系统，可以帮助企业极大的提高测试效率，节省测试成本。</li>
						<li><i class="wb-check" aria-hidden="true"></i> 您可以
							用DMS，对缺陷进行实时查看，分配</li>
						<li><i class="wb-check" aria-hidden="true"></i> DMS
							融合开发，测试，项目经理，提供更多的交互。</li>
					</ul>
					<div class="hidden-sm">
						<a href="/" class="btn btn-primary margin-right-5"
							target="_self"><i class="icon wb-home"></i> 返回首页</a> <a
							href="admin/login" class="btn btn-success dropdown-toggle"
							target="_self"><i class="icon wb-download"></i>管理员</a> <a
							href="javascript:;" class="btn btn-info open-kf"><i
							class="icon wb-user"></i> 联系我们</a>
					</div>
				</div>
			</div>
			<div class="page-login-main animation-fade">

				<div class="vertical-align">
					<div class="vertical-align-middle">
						<div class="brand visible-xs text-center">
							<img class="brand-img" src="images/login.jpg" height="50"
								alt="D M S">
						</div>

						<form enctype="multipart/form-data" method="post"
							action="user/regist" onsubmit="return tosure()"
							class="login-form" id="loginForm">
							<div align="center">
								<h3 class="hidden-xs">注册 DMS账号</h3>
								<br>
							</div>
							<div>
								<div class="form-group">
									<div align="center" border="2px solid;" border-radius="25px;">
										<img align="center" id="imgPre" src="" width="40%;"
											height="20%;" alt="点击上传用户头像" onclick="F_Open_dialog()"
											style="display: block;" />
									</div>
								</div>

								<div class="form-group">
									<label class="sr-only" for="username">用户名</label> <input
										type="text" class="form-control" id="number"
										name="student_num" placeholder="请输入账号" required="required" />
								</div>

								<div class="form-group">
									<input type="text" name="username" id="name"
										required="required" class="form-control" placeholder="用户昵称" />
								</div>

								<div class="form-group">
									<input type="file" name="file" id="imgOne"
										style="display: none" onchange="preImg(this.id,'imgPre');"
										class="form-control" />
								</div>


								<div class="form-group">
									<input type="password" id="password" class="form-control"
										required="required" placeholder="请输入密码" name="password" />
								</div>

								<div class="form-group">
									<input type="password" class="form-control" id="passwordform"
										name="passwordconfirm" required="required"
										placeholder="请重复输入密码" />
								</div>


								<div class="form-group">
									<input type="text" name="email" id="email" required="required"
										placeholder="请输入邮箱" class="form-control" />
								</div>

								<div class="form-group">
									<label class="sr-only" for="password">验证码</label>
									<div class="input-group">

										<input type="text" id="emailnumber" class="form-control"
											placeholder="请输入邮箱验证码" onchange="tosure()" /> <a
											class="input-group-addon padding-0 reload-vify"
											href="javascript:;">

											<div class="form-group">
												<table border="0" cellspacing="5" cellpadding="5">
													<tr>
														<td><div>

																<input type="button" value="点击发送验证码" class="code"
																	onclick="sendCode(this)" />
															</div></td>
													</tr>
												</table>
											</div>
										</a>
									</div>
								</div>
								<div id="istrue">请输入验证码</div>

								<div class="form-group clearfix">

									<div class="pull-right">
										<a href="user/login" target="_self">直接登录</a> ·

									</div>
								</div>

								<input type="submit"
									class="btn btn-primary btn-block margin-top-30" value="立即注册">
						</form>
					</div>
				</div>
				<footer class="page-copyright">
				<p>缺陷管理系统 &copy; MYQZ</p>
				</footer>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		function getFileUrl(sourceId) { 
		var url; 
		if (navigator.userAgent.indexOf("MSIE")>=1) { // IE 
			url = document.getElementById(sourceId).value; 
			} else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox 
			url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); 
			} else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome 
			url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); 
			} 
		return url; 
		} 
	
/** 
* 将本地图片 显示到浏览器上 
*/ 
		function preImg(sourceId, targetId) { 
		var url = getFileUrl(sourceId); 
		var imgPre = document.getElementById(targetId); 
		imgPre.src = url; 
		} 

        function F_Open_dialog() 
       { 
            document.getElementById("imgOne").click(); 
       } 
   
      //设置按钮等待时间
        var clock = '';
        var nums = 30;
        var btn;
        function sendCode(thisBtn)
        { 
        	sure();
       		btn = thisBtn;
        	btn.disabled = true; //将按钮置为不可点击
        	btn.value = nums+'秒后可重新获取';
        	clock = setInterval(doLoop, 1000); //一秒执行一次
        }
        function doLoop()
        {
        	nums--;
        	if(nums > 0){
         	btn.value = nums+'秒后可重新获取';
        	}else{
         	clearInterval(clock); //清除js定时器
        	 btn.disabled = false;
         	btn.value = '点击发送验证码';
         	nums = 60; //重置时间
        }
        }   
        
 		var number;
		function tosure()
		{
	
		 var emailnumber=document.getElementById("emailnumber").value;
	  		if(number==emailnumber)
	  		{ 
		 	 document.getElementById("istrue").innerHTML="验证码正确";
		 	 return true;
	  		}
	  		else
		 	 {
		  	document.getElementById("istrue").innerHTML="验证码错误";
		  	return false;
		  	}
		}
	//获取后台验证码
	var isemali=true;
	function sure()
	{
	   var mail=document.getElementById("email").value;
	   if($.trim(mail) == "" || ($.trim(mail) != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test($.trim(mail)))){
          alert("请输入正确的E-Mail地址！");
       }
       else{
           $.ajax({url:'user/emailnumber',  /*  //ajax传数据到后台 */
                  data:{
                      email: mail
                  },
                  type:"post",
                  async:false,
                  dataType:"json",
                  success:function(data){
                   number=data.number;
                  }
              }); 	
    		alert(number);/* 获取验证码 */
    	alert("验证码已发送到"+a+"请查收，并输入验证码");
       }
	}


    $(document).ready(function(){
        //为表单的必填文本框添加提示信息（选择form中的所有后代input元素）
        $("form :input.required").each(function(){ 
            //创建元素
            var $required = $("<strong class='high'>*</strong>");
            //将它追加到文档中
            $(this).parent().append($required);
        });
        
        //为表单的必填文本框添加相关事件（blur、focus、keyup）
        $("form :input").blur(function(){
            //注意：这里的this是DOM对象，$(this)才是jQuery对象
            var $parent = $(this).parent();
            //删除之前的错误提醒信息
            $parent.find(".msg").remove();
            //验证“编号”
            if($(this).is("#number")){
                //运用jQuery中的$.trim()方法，去掉首位空格
                if($.trim(this.value) == ""){
                    var errorMsg = " 请输入6~10位！";
                    //class='msg onError' 中间的空格是层叠样式的格式
                    $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
                 //   document.getElement("span").style.color = "red"
                }
                else if($.trim(this.value).length < 6)
                	{
                    var errorMsg = " 账号过短！";
                    $parent.append("<span class='msg onError'>" + errorMsg + "</span>"); 
                	}
                else if( $.trim(this.value).length > 10){
                    var errorMsg = " 账号过长！";
                    $parent.append("<span class='msg onError'>" + errorMsg + "</span>"); 
                }
                else{
                    
                }                
            }
            
            //验证“名称”
            if($(this).is("#name")){
                //运用jQuery中的$.trim()方法，去掉首位空格
                if($.trim(this.value) == "" || $.trim(this.value).length < 2){
                    var errorMsg = " 请输入至少2位的名称！";
                    //class='msg onError' 中间的空格是层叠样式的格式
                    $parent.append("<span class='msg onError'>" + errorMsg + "</span>"); 
                }        
            }
            
            if($(this).is("#password")){
                if($.trim(this.value) == "" ){
                    var errorMsg = " 请输入6~20个字符！";
                    $parent.append("<span class='msg onError'>" + errorMsg + "</span>"); 
                }
                else if($.trim(this.value).length < 6)
                	{
                	  var errorMsg = " 密码过短！";
                      $parent.append("<span class='msg onError'>" + errorMsg + "</span>"); 
                	}
                else if($.trim(this.value).length  >20)
                {
                    var errorMsg = " 密码过长！";
                    $parent.append("<span class='msg onError'>" + errorMsg + "</span>"); 
                }
               else{
                    password=$.trim(this.value);
                }               
            }

            if($(this).is("#passwordform")){
                if($.trim(this.value) == password )
                {
                    var okMsg=" 输入正确";
                    $parent.find(".high").remove();
                    $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
                }           
                else
                {
                    var errorMsg = " 两次密码不符！";
                    $parent.append("<span class='msg onError'>" + errorMsg + "</span>"); 
                }
            }
            
            
            if($(this).is("#telephone")){
                if($.trim(this.value) == "" || $.trim(this.value)!=""&&!(/^1[34578]\d{9}$/.test($.trim(this.value)))){
                    var errorMsg = " 请输入正确的手机号！";
                    $parent.append("<span class='msg onError'>" + errorMsg + "</span>"); 
                }         
            }
            //验证邮箱
            if($(this).is("#email")){
                if($.trim(this.value) == "" || ($.trim(this.value) != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test($.trim(this.value)))){
                    var errorMsg = "请输入正确的E-Mail地址！";
                    $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
                }
          
            }
        }).keyup(function(){
            $(this).triggerHandler("blur");
        }).focus(function(){
            $(this).triggerHandler("blur");
        });
    });
    </script>
</body>
</html>
